<template>
  <div>
    <div class="float-right-card"></div>
    <div class="w-1200-container">
      <div :class="['drop-menu', menuClass]" @click="menuOpen = !menuOpen">
        优选服务
        <i class="el-icon-caret-top arrow-icon"></i>

        <div class="menu-list">
          <div v-for="item in menuList" :key="item.name" class="menu-item">
            <div class="title">
              {{ item.name }}
            </div>

            <div class="sub-menu">
              <div v-for="(subItem, index) in item.routes" :key="subItem.name">
                <div>
                  <router-link :to="subItem.path">
                    {{ subItem.name }}
                  </router-link>
                  <el-divider
                    v-if="hasDivider(index, item.routes.length)"
                    direction="vertical"
                  ></el-divider>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-container">
      <div class="bg-img">
        <!-- <el-image :src="bgImg" fit="cover"> </el-image> -->
        <el-carousel indicator-position="inside" height="500px">
          <el-carousel-item v-for="item in bgImg" :key="item.id">
            <a :href="item.redirectUrl ? item.redirectUrl : ''">
              <el-image :src="item.picture" fit="cover"> </el-image>
            </a>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="identity-list pr-0 sm:pr-0 md:pr-10 lg:pr-32">
        <div v-for="item in identityList" :key="item.title" class="item">
          <div class="flex content-center">
            <el-divider></el-divider>
            <div class="text-bold title">
              {{ item.title }}
            </div>
            <el-divider></el-divider>
          </div>

          <!-- <el-divider content-position="center">
            <span class="text-bold title"> {{ item.title }}</span>
          </el-divider> -->

          <div class="flex flex-wrap">
            <div
              v-for="subItem in item.routes"
              :key="subItem.name"
              class="sub-item"
            >
              <i class="el-icon-s-custom"></i>
              <router-link :to="{ path: subItem.path }">
                {{ subItem.name }}
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="num-list">
      <div class="title text-bold ">资源大数据</div>
      <div class="num-container">
        <ScrollNum :num="255" />
        <div class="secondary-text">政策数据</div>
      </div>
      <div class="num-container">
        <ScrollNum :num="techNeedsTotal" />
        <div class="secondary-text">技术需求</div>
      </div>
      <div class="num-container">
        <ScrollNum :num="techAchievementsTotal" />
        <div class="secondary-text">科技成果</div>
      </div>
      <div class="num-container">
        <ScrollNum :num="techExpertTotal" />
        <div class="secondary-text">技术专家</div>
      </div>
    </div>

    <div
      ref="module-1"
      :class="['sm-module-container', isAddClass(eleList[1])]"
    >
      <div :class="['sm-module-1']">
        <div class="lt-float-bg"></div>
        <div class="module-title">科技资源</div>
        <el-tabs
          v-model="techActiveName"
          @tab-click="handleTechClick"
          style="width: 1200px;margin: auto"
        >
          <el-tab-pane label="科技成果" name="0">
            <div
              :class="['module-container', 'animated', techSrouceAnimate(0)]"
            >
              <MoudleItem
                v-for="item in techAchievements"
                :key="item.id"
                :objInfo="item"
              />
            </div>
          </el-tab-pane>

          <el-tab-pane label="技术需求" name="1">
            <div
              :class="['module-container', 'animated', techSrouceAnimate(1)]"
            >
              <TechNeedItem
                v-for="item in techNeeds"
                :key="item.picture"
                :objInfo="item"
              />
            </div>
          </el-tab-pane>

          <el-tab-pane label="技术专家" name="2">
            <div
              :class="['module-container', 'animated', techSrouceAnimate(2)]"
            >
              <TechExpertItem
                v-for="item in techExpert"
                :key="item.id"
                :objInfo="item"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
        <div
          v-if="techActiveName === '0'"
          class="bottom-tip placeholder-text z-50"
        >
          携手4000+合作伙伴为个人、企业、高校提供丰富科技资源服务
          <span
            @click="routeLink('/techSource/techAchievements')"
            class="inline-block text-blue-500 cursor-pointer"
          >
            进入科技成果
          </span>
        </div>
        <div v-if="techActiveName === '1'" class="bottom-tip placeholder-text">
          携手4000+合作伙伴为个人、企业、高校提供丰富科技资源服务
          <span
            @click="routeLink('/techSource/techNeed')"
            class="inline-block text-blue-500 cursor-pointer"
          >
            进入技术需求
          </span>
        </div>

        <div
          v-if="techActiveName === '2'"
          class="bottom-tip placeholder-text bg-white"
        >
          携手4000+合作伙伴为个人、企业、高校提供丰富科技资源服务
          <span
            @click="routeLink('/techSource/expertBase')"
            class="inline-block text-blue-500 cursor-pointer"
          >
            进入技术专家
          </span>
        </div>
      </div>
    </div>

    <div
      ref="module-2"
      :class="['sm-module-container ', isAddClass(eleList[1]), 'mb-12']"
    >
      <div class="sm-module-2 ">
        <!-- <div class="bg-img">
          <el-image :src="innovateBgImg" fit="cover" lazy></el-image>
        </div> -->
        <div class="module-title">创新服务</div>
        <el-tabs v-model="innovateActive" @tab-click="handleInnovateClick">
          <el-tab-pane label="技术转移服务" name="0">
            <div class="module-container">
              <div class="left">
                <div class="content text-left p-8 pt-12 text-white">
                  <h4>
                    {{ innovateHeadList[parseInt(innovateActive)].title }}
                  </h4>
                  <p class=" pt-12 text-left">
                    {{ innovateHeadList[parseInt(innovateActive)].brief }}
                  </p>
                </div>
                <div class="module-card-img">
                  <el-image
                    :src="require('@/assets/icons/home/float-left.png')"
                  >
                  </el-image>
                </div>
              </div>
              <div class="right">
                <div
                  v-for="item in techTransferInfo"
                  :key="item.id"
                  class="item"
                >
                  <div class="text-xl font-bold py-2 title">
                    {{ item.title }}
                  </div>
                  <div class="content">
                    {{ item.content }}
                  </div>
                  <div class="btn">
                    <el-image
                      :src="require('@/assets/icons/home/msg.png')"
                    ></el-image>
                    立即咨询
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="科技服务" name="1">
            <div class="module-container">
              <div class="left">
                <div class="content text-left p-8 pt-12 text-white">
                  <h4>
                    {{ innovateHeadList[parseInt(innovateActive)].title }}
                  </h4>
                  <p class=" pt-12 text-center">
                    <span class="inline-block text-left">
                      {{ innovateHeadList[parseInt(innovateActive)].brief }}
                    </span>
                  </p>
                </div>
                <div class="module-card-img">
                  <el-image
                    :src="require('@/assets/icons/home/float-left.png')"
                  >
                  </el-image>
                </div>
              </div>
              <div class="right">
                <div
                  v-for="item in techServiceInfo"
                  :key="item.id"
                  class="item"
                >
                  <div class="text-xl font-bold py-2">{{ item.title }}</div>
                  <div class="content">
                    {{ item.content }}
                  </div>
                  <div class="btn">
                    <el-image
                      :src="require('@/assets/icons/home/msg.png')"
                    ></el-image>
                    立即咨询
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="科技金融" name="2">
            <div class="module-container">
              <div class="left">
                <div class="content text-left p-8 pt-12 text-white">
                  <h4>
                    {{ innovateHeadList[parseInt(innovateActive)].title }}
                  </h4>
                  <p class=" pt-12 text-center">
                    <span class="inline-block text-left">
                      {{ innovateHeadList[parseInt(innovateActive)].brief }}
                    </span>
                  </p>
                </div>
                <div class="module-card-img">
                  <el-image
                    :src="require('@/assets/icons/home/float-left.png')"
                  >
                  </el-image>
                </div>
              </div>
              <div class="right">
                <div
                  v-for="item in techEconmicInfo"
                  :key="item.id"
                  class="item"
                >
                  <div class="text-xl font-bold py-2">{{ item.title }}</div>
                  <div class="content">
                    {{ item.content }}
                  </div>
                  <div class="btn">
                    <el-image
                      :src="require('@/assets/icons/home/msg.png')"
                    ></el-image>
                    立即咨询
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="专家服务" name="3">
            <div class="module-container">
              <div class="left">
                <div class="content text-left p-8 pt-12 text-white">
                  <h4>
                    {{ innovateHeadList[parseInt(innovateActive)].title }}
                  </h4>
                  <p class=" pt-12 text-center">
                    <span class="inline-block text-left">
                      {{ innovateHeadList[parseInt(innovateActive)].brief }}
                    </span>
                  </p>
                </div>
                <div class="module-card-img">
                  <el-image
                    :src="require('@/assets/icons/home/float-left.png')"
                  >
                  </el-image>
                </div>
              </div>
              <div class="right">
                <div
                  v-for="item in expertServiceInfo"
                  :key="item.id"
                  class="item"
                >
                  <div class="text-xl font-bold py-2">{{ item.title }}</div>
                  <div class="content">
                    {{ item.content }}
                  </div>
                  <div class="btn">
                    <el-image
                      :src="require('@/assets/icons/home/msg.png')"
                    ></el-image>
                    立即咨询
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div
      ref="module-3"
      :class="['sm-module-container', isAddClass(eleList[2])]"
    >
      <div class="sm-module-3">
        <div class="bg-img">
          <!-- <el-image :src="platformsBigImg" fit="cover"></el-image> -->
        </div>
        <div class="module-title">平台数据展示</div>
        <el-tabs v-model="platformActive" @tab-click="handlePlatformClick">
          <el-tab-pane label="人才" name="0">
            <div class="module-container">
              <div class="left">
                <div id="map" class="map"></div>
              </div>
              <div class="right">
                <div v-for="item in talentList" :key="item.title" class="item">
                  <div class="title">
                    {{ item.title }}
                  </div>

                  <div class="list">
                    <el-row :gutter="10" style="width: 100%">
                      <el-col
                        v-for="subItem in item.addInfo"
                        :key="subItem.name"
                        :span="8"
                      >
                        <div class="num-container">
                          <span class="num"> {{ subItem.numInfo }} </span>
                          <span class="unit"> {{ subItem.unit }} </span>
                        </div>
                        <div class="name">
                          {{ subItem.name }}
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="技术" name="1"> </el-tab-pane>
          <el-tab-pane label="政策" name="2"> </el-tab-pane>
          <el-tab-pane label="金融" name="3"> </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div ref="module-4" :class="['sm-module-container-4']">
      <div class="sm-module-4">
        <div class="bg-img">
          <el-image :src="platformsBigImg" fit="cover" lazy></el-image>
        </div>
        <div class="module-title">合作伙伴</div>

        <div class="line-container">
          <div
            v-for="(listItem, listIndex) in partnerList"
            :key="listIndex"
            class="hexagon-container"
          >
            <div
              v-for="(item, index) in listItem"
              :key="index"
              :class="hexagonClass(item)"
            >
              <div class="img-container">
                <el-image
                  v-if="!partnerIsTitle(item) && partnerPicture(item)"
                  fit="contain"
                  :src="partnerPicture(item)"
                  lazy
                ></el-image>
              </div>

              <div v-if="partnerIsTitle(item)" class="content">
                {{ item.title ? item.title : '无' }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ScrollNum from './ScrollNum'
import MoudleItem from './ModuleItem.vue'
import TechNeedItem from './TechNeedItem.vue'
import TechExpertItem from './TechExpertItem.vue'

import chinaJson from '@/assets/js/echartsChina.js'
import { getPartnerList } from '@/api/partner'
import { getBannerList } from '@/api/banner'
import { getAchievementsList } from '@/api/techAchievements'
import { getSpecialist } from '@/api/expert'
import { getTechNeedList } from '@/api/techNeed'

// import echarts from 'echarts/lib/echarts'
export default {
  name: 'home',
  components: { ScrollNum, MoudleItem, TechNeedItem, TechExpertItem },
  computed: {
    hasDivider() {
      return (index, length) => {
        if (length > index + 1) {
          return true
        }
        return false
      }
    },
    // 菜单 显示 隐藏 样式
    menuClass() {
      return !this.menuOpen ? 'active-menu' : ''
    },
    // 科技资源 特效样式添加
    techSrouceAnimate() {
      return (itemName) => {
        if (this.techActiveName == itemName) {
          return 'fadeIn'
        }
        return ''
      }
    },

    hexagonClass() {
      return (item) => {
        if (item && item.title && !item.picture) {
          return 'hexagon-title'
        } else {
          return 'hexagon'
        }
      }
    },

    isAddClass() {
      return (ele) => {
        if (ele.isAnimated) {
          return 'animated fadeInUp dis-show'
        } else {
          return ''
        }
      }
    },
    partnerPicture() {
      return (item) => {
        return item?.picture && item.picture
      }
    },
    partnerIsTitle() {
      return (item) => {
        if (item && (item.addIndex || item.addIndex == 0)) {
          return true
        }
        return false
      }
    },
  },
  data() {
    return {
      setTimeFadeCss: '',
      menuOpen: false,
      menuList: [
        {
          title: '科技体验',
          routes: [{ name: '企业科技体验', path: '' }],
        },
        {
          title: '政策应用',
          routes: [
            { name: '政策精准查询', path: '' },
            { name: '政策智能检测', path: '' },
          ],
        },
        {
          title: '技术升级',
          routes: [
            { name: '技术需求发布', path: '' },
            { name: '小微创新服务众包', path: '' },
          ],
        },
        {
          title: '融资服务',
          routes: [
            { name: '债权融资', path: '' },
            { name: '股权融资', path: '' },
          ],
        },
        {
          title: '人才服务',
          routes: [
            { name: '专家智库查询', path: '' },
            { name: '人才需求发布', path: '' },
          ],
        },
        {
          title: '知产服务',
          routes: [
            { name: '专利服务', path: '' },
            { name: '专利布局', path: '' },
          ],
        },
      ],
      bgImg: [],
      identityList: [
        {
          title: '我是企业',
          routes: [
            { name: '找技术', iconUrl: '', path: '' },
            { name: '找专家', iconUrl: '', path: '' },
            { name: '找服务', iconUrl: '', path: '' },
            { name: '找政策', iconUrl: '', path: '' },
            { name: '找资金', iconUrl: '', path: '' },
            { name: '找仪器', iconUrl: '', path: '' },
          ],
        },
        {
          title: '我是院校',
          routes: [
            { name: '科技成果', iconUrl: '', path: '' },
            { name: '共享仪器', iconUrl: '', path: '' },
            { name: '解决就业', iconUrl: '', path: '' },
            { name: '创新创业', iconUrl: '', path: '' },
            { name: '产学研对接', iconUrl: '', path: '' },
          ],
        },
        {
          title: '我是政府',
          routes: [
            { name: '招商引资', iconUrl: '', path: '' },
            { name: '招才引智', iconUrl: '', path: '' },
            { name: '创新数据', iconUrl: '', path: '' },
            { name: '产业排摸', iconUrl: '', path: '' },
            { name: '产业园区', iconUrl: '', path: '' },
            { name: '赛事服务', iconUrl: '', path: '' },
          ],
        },
      ],
      // numInfo: [
      //   { name: '政策数据', num: 13200 },
      //   { name: '技术需求', num: 13430 },
      //   { name: '科技成果', num: 13120 },
      //   { name: '技术专家', num: 13430 },
      // ],

      // 科技资源
      techActiveName: '0',

      techNeedsQueryParams: {
        pageSize: 6,
        pageNum: 1,
      },

      // 创新服务
      innovateActive: '0',
      innovateBgImg: 'https://w.wallhaven.cc/full/j3/wallhaven-j3vdgq.jpg',
      innovateAchievements: [],

      // 创新服务
      innovateHeadList: [
        {
          title: '技术转移服务',
          brief:
            '根据企业客户所在行业及企业自身技术问题，协调行业技术专家，深入企业现场，为企业提供专业化技术诊断与需求分析，帮助企业找到技术问题，提供解决建议。',
        },
        {
          title: '科技服务',
          brief:
            '为企业与技术持有者搭建起高速安全便捷的交易桥梁解决企业技术创新问题同时也为技术持用者创造技术价值，促进科技成果转化和产业化，带动区域产业技术升级',
        },
        {
          title: '科技金融',
          brief:
            '搭建金融机构与科技企业的桥梁,拓展企业融资渠道,助力企业发展壮大，为科技型企业提供个性化的综合性融资解决方案。',
        },
        {
          title: '专家服务',
          brief:
            '为科技领域专家、学校、科研院所的行业专家与企业建立联系,帮助企业解决在产品研发中遇到的新工艺、新材料问题，同时在产品设计 、节能优化等方面技术提供咨询、人才培养等服务。',
        },
      ],
      // 技术转移服务数据
      techTransferInfo: [
        {
          id: 0,
          title: '技术诊断',
          content:
            '根据企业客户所在行业及企业自身技术问题，协调行业技术专家，深入企业现场，为企业提供专业化技术诊断与需求分析，帮助企业找到技术问题，提供解决建议。',
        },
        {
          id: 1,
          title: '网上技术市场',
          content:
            '鼓励科技成果转让方、受让方、技术转移服务机构等各类主体，以实名制的方式，参与“江西省网上常设技术市场”的科技成果在线对接和技术交易等活动。',
        },
        {
          id: 2,
          title: '产学研合作',
          content:
            '产学研合作是针对企业发展过程中需要与高校院所进行产学研合作的需求，提供与高校一级行政单位产学研合作渠道，帮助企业建立技术背书。',
        },
        {
          id: 3,
          title: '技术转移培训',
          content:
            '组织开展技术经理人培训，进行技术转移体制机制解读，技术转让、技术许可、联合研发等的方法路径疏通，实务操作演练案例分享。',
        },
        {
          id: 4,
          title: '企业技术创新',
          content: '为科技型企业提供个性化的综合性融资解决方案。',
        },
        {
          id: 5,
          title: '科技人才',
          content:
            '帮助企业技术创新而打造的服务矩阵，以技术转移为核心，配套知识产权、政策应用等服务，定制化组合，为企业落实创新发展提供全方位支持。',
        },
      ],
      // 科技服务数据
      techServiceInfo: [
        {
          id: 0,
          title: '科技中小型企业',
          content:
            '通过技转云资源和技术转移全流程系统，帮助人才的资历、经验及品牌显性化，同时基于人才的研发领域，匹配相应领域需求的企业进行产学研合作，助力能力价值与科技成果转化。',
        },
        {
          id: 1,
          title: '高新技术企业',
          content:
            '鼓励科技成果转让方、受让方、技术转移服务机构等各类主体，以实名制的方式，参与“江西省网上常设技术市场”的科技成果在线对接和技术交易等活动。',
        },
        {
          id: 2,
          title: '瞪羚企业',
          content:
            '产学研合作是针对企业发展过程中需要与高校院所进行产学研合作的需求，提供与高校一级行政单位产学研合作渠道，帮助企业建立技术背书。',
        },
        {
          id: 3,
          title: '独角兽企业',
          content:
            '组织开展技术经理人培训，进行技术转移体制机制解读，技术转让、技术许可、联合研发等的方法路径疏通，实务操作演练案例分享。',
        },
        {
          id: 4,
          title: '科技金融',
          content: '为科技型企业提供个性化的综合性融资解决方案。',
        },
        {
          id: 5,
          title: '科技人才',
          content:
            '帮助企业技术创新而打造的服务矩阵，以技术转移为核心，配套知识产权、政策应用等服务，定制化组合，为企业落实创新发展提供全方位支持。',
        },
      ],

      // 科技金融
      techEconmicInfo: [
        {
          id: 0,
          title: '企业VIP咨询',
          content:
            '主要从顶层架构设计、股权结构设计、股权运营方案设计、股权激励方案设计、商业模式重塑、财税规划、知识产权规划、无形资产的挖掘和塑造、法律风险防范等辅导。',
        },
        {
          id: 1,
          title: '商业计划书打磨',
          content:
            '从投资机构角度为企业打磨商业计划书——（1）囊括投资机构关注的各项基本信息；（2）为企业提取投资亮点；（3）展示发展潜力。为企业更好地吸引投资机构。',
        },
        {
          id: 2,
          title: '股权框架设计',
          content:
            '根据客户的设立地点、发展规划等设计合理的股权架构、员工激励平台等，以达到优化管理、合理避税、有效激励员工等目的，并为后续的企业扩张提供合理基础。',
        },
        {
          id: 3,
          title: '科技融资筹划',
          content:
            '对有融资需求的科技型企业，根据其财务状况、发展阶段、项目推荐等特点，提供个性化融资解决方案。',
        },
        {
          id: 4,
          title: '创赛辅导',
          content:
            '全方位为客户提供创业比赛需要的BP打磨、路演辅导、赛后提升、项目落地、对接资本等服务。',
        },
        {
          id: 5,
          title: '企业区域落地',
          content:
            '根据企业阶段性发展规划，助力企业从战略规划到市场拓展、产品研发、人才引进等方面综合规划及支持，择优进行区域布局合作。',
        },
      ],

      // 专家服务
      expertServiceInfo: [
        {
          id: 0,
          title: '创新成果转化',
          content:
            '通过技转云资源和技术转移全流程系统，帮助人才的资历、经验及品牌显性化，同时基于人才的研发领域，匹配相应领域需求的企业进行产学研合作，助力能力价值与科技成果转化。',
        },
        {
          id: 1,
          title: '成果评估',
          content:
            '提供线上技术自助评估服务，运用预期收益法和成本重置法为交易双方提供免费的在线技术交易价格评估功能，用户通过输入相关参数，即可获得技术交易参考价格。',
        },
        {
          id: 2,
          title: '成果对接',
          content:
            '为科技成果提供宣传推广平台，筛选匹配有相应需求的企业进行横向转让合作，可以是成果转让、技术入股或授权许可等多种形式合作。',
        },
        {
          id: 3,
          title: '科技成果拍卖',
          content:
            '科技成果拍卖将面向省内外高校院所和企事业单位征集符合江西产业发展需求的科技成果，通过促成受让意向、组织竞拍活动、促成技术交易、提供产业化服务。',
        },
        {
          id: 4,
          title: '产学研精准对接',
          content:
            '基于专家的研发领域，匹配相应领域需求的企业进行产学研合作，如技术研发委托合作、技术攻关合作开发，或与企业合作实施相应的新产品、新技术、新工艺、新材料开发和推广应用等合作，并跟踪进展。',
        },
        {
          id: 5,
          title: '横向课题',
          content:
            '专家接受政府部门（不含相关部门下达的常规计划项目）企事业单位，社会团体委托开展的技术开发、技术服务、技术咨询、技术申请等项目。',
        },
      ],

      // 平台数据展示
      platformsBigImg: '',
      platformActive: '0',
      talentMapInfo: [],
      // 人才数据
      talentList: [
        {
          title: '人才大数据',
          addInfo: [
            { name: '覆盖的地域', numInfo: 33, unit: '省' },
            { name: '入驻院校', numInfo: 855, unit: '家' },
            { name: '资源总量', numInfo: 39.5, unit: '万位' },
          ],
        },
        {
          title: '综合服务大数据',
          addInfo: [
            { name: '撮合次数', numInfo: 652, unit: '万次' },
            { name: '成交金额', numInfo: 32.6, unit: '亿元' },
            { name: '累计服务', numInfo: 183.1, unit: '万项次' },
            { name: '服务高新区', numInfo: 132, unit: '家' },
            { name: '服务经开区', numInfo: 85, unit: '家' },
            { name: '服务企业数', numInfo: 15.8, unit: '万' },
          ],
        },
      ],
      platformsInfo: [],

      eleList: [
        { refName: 'module-1', isAnimated: false },
        { refName: 'module-2', isAnimated: false },
        { refName: 'module-3', isAnimated: false },
      ],
      addPartnerList: [
        { addIndex: 0, title: '政府单位' },
        { addIndex: 6, title: '高校院所' },
        { addIndex: 34 - 6, title: '企业品牌' },

        { addIndex: 34, title: '服务机构' },
      ],
      partnerList: [
        // [
        //   { addIndex: 0, title: '政府单位' },
        //   ...Array(5).fill({ picture: '', title: '' }),
        //   { addIndex: 6, title: '高校院所' },
        // ],
        // Array(7).fill({ picture: '', title: '' }),
        // Array(7).fill({ picture: '', title: '' }),
        // Array(7).fill({ picture: '', title: '' }),
        // [
        //   { addIndex: 34 - 6, title: '企业品牌' },
        //   ...Array(7).fill({ picture: '', title: '' }),
        //   { addIndex: 34, title: '服务机构' },
        // ],
      ],
      // 技术需求
      techNeedsTotal: 0,
      techNeeds: [],

      // >>>>>>>>>>> 科技成果
      techAchievementsTotal: 0,
      techAchievements: [],
      achieveQueryParams: {
        pageNum: 1,
        pageSize: 6,
      },

      // 专家智库
      techExpertTotal: 0,
      techExpert: [],
      techExpertQueryParams: {
        pageNum: 1,
        pageSize: 6,
      },
    }
  },
  created() {
    this.getBanner()
    this.initPartnerList()
    this.getPartner()
    this.getAchieveList()
    this.getExpertList()
    this.getTechNeed()
  },
  mounted() {
    this.initEchartsMap()

    // this.scrollEvent()
  },
  methods: {
    routeLink(path) {
      this.$router.push({ path: path })
    },
    // 获取轮播图
    getBanner() {
      getBannerList().then((res) => {
        if (res.code == 200) {
          let data = res.data
          if (Array.isArray(data)) {
            this.bgImg = data
          } else {
            this.bgImg = [data]
          }
        }
      })
    },
    initPartnerList() {
      let resArr = []
      for (let index = 0; index < 5; index++) {
        let tempArr = Array(7).fill({
          picture: '',
          title: '',
        })
        resArr = resArr.concat(tempArr)
      }
      this.partnerList = this.dividePartnerList(resArr)
    },
    // 将 合作伙伴 图片数组 分裂为 5个 数组长度为 7 的数组
    dividePartnerList(list) {
      let listLength = list.length
      // 31 === 需要的数组长度 - 各个角的 title 元素 （35-4）
      let distanceLength = 35 - 4 - listLength
      let fullList = list
      if (distanceLength && distanceLength > 0) {
        let distanceArr = new Array(distanceLength)
        fullList = fullList.concat(distanceArr)
      }

      for (let index = 0; index < this.addPartnerList.length; index++) {
        const element = this.addPartnerList[index]
        fullList.splice(element.addIndex, 0, element)
      }

      let resArr = []
      for (let index = 0; index < 5; index++) {
        resArr[index] = fullList.splice(0, 7)
      }
      return resArr
    },
    // 排序合作伙伴图片，根据 sort 大小，从小到大
    sortPartner(list, propName = 'sort') {
      let newList = list.sort((a, b) => {
        let aNum = parseInt(a[propName]) || 0
        let bNum = parseInt(b[propName]) || 0
        return aNum - bNum
      })
      return newList
    },
    // 获取合作伙伴图片
    getPartner() {
      // this.initPartnerList()
      getPartnerList().then((res) => {
        let data = []
        if (res.code == 200) {
          data = res.data
        }
        data = this.sortPartner(res.data)
        this.partnerList = this.dividePartnerList(data)

        // for (let index = 0; index < this.addPartnerList.length; index++) {
        //   const element = this.addPartnerList[index]
        //   this.partnerList[element.listIndex][element.addIndex] = element
        // }
      })
    },

    // 获取 科技成果
    getAchieveList() {
      getAchievementsList(this.achieveQueryParams).then((res) => {
        if (res.code == 200) {
          this.techAchievements = res.rows
          this.techAchievementsTotal = res.total
          setTimeout(() => {
            this.techExptechAchievementsTotalertTotal = res.total
          }, 1000)
        }
      })
    },

    // 获取 技术专家
    getExpertList() {
      getSpecialist(this.techExpertQueryParams).then((res) => {
        if (res.code == 200) {
          this.techExpert = res.rows
          setTimeout(() => {
            this.techExpertTotal = res.total
          }, 1000)
        }
      })
    },

    // 获取技术需求
    getTechNeed() {
      getTechNeedList(this.techNeedsQueryParams).then((res) => {
        if (res.code == 200) {
          this.techNeeds = res.rows
          setTimeout(() => {
            this.techNeedsTotal = res.total
          }, 1000)
        }
      })
    },

    scrollEvent() {
      let that = this
      this.$nextTick(() => {
        window.addEventListener('scroll', () => {
          that.throttle(that.handleScroll, 600)()
        })
        that.handleScroll()
      })
    },

    throttle(fn, delay) {
      let valid = true
      return function() {
        if (!valid) {
          //休息时间 暂不接客
          return false
        }
        // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
          fn()
          valid = true
        }, delay)
      }
    },
    // 判断 元素 是否出现在 视窗内
    isElementNotInViewport(el) {
      if (!el) {
        return
      }

      const viewHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight
      let elOffsetTop = el.offsetTop
      const scrollTop = document.documentElement.scrollTop

      if (elOffsetTop + 200 < scrollTop + viewHeight) {
        return true
      }
      return false
    },
    handleScroll() {
      for (let i = 0; i < this.eleList.length; i++) {
        const element = this.eleList[i]
        let refName = this.$refs[element.refName]
        if (!element.isAnimated) {
          if (this.isElementNotInViewport(refName)) {
            element.isAnimated = true
          } else {
            element.isAnimated = false
          }
        }
      }
    },
    // 科技资源菜单栏
    handleTechClick(tab) {
      this.techActiveName = tab.name
    },

    // 创新服务菜单栏
    handleInnovateClick(tab) {
      this.innovateActive = tab.name
    },

    // 平台数据展示菜单栏
    handlePlatformClick(tab) {
      this.platformActive = tab.name
    },

    // 初始化地图
    initEchartsMap() {
      this.$echarts.registerMap('china', chinaJson)
      var chart = this.$echarts.init(document.getElementById('map'))

      chart.setOption({
        title: {
          // text: '中国轮廓地图',
          top: '4%',
          left: 'center',
          textStyle: {
            fontSize: 20,
            fontWeight: 600,
            color: '#fff',
          },
        },
        tooltip: {
          // 触发类型, 数据项图形触发
          trigger: 'item',
          backgroundColor: '#fff',
          textStyle: {
            color: '#000',
          },
          formatter: function(val) {
            return (
              val.data.name +
              '<div class="bjMap">' +
              '<p>' +
              val.data.value +
              '</p>' +
              '</div>'
            )
          },
        },
        series: [
          {
            type: 'map',
            map: 'china',
            roam: false, //是否开启鼠标缩放和平移漫游
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            label: {
              normal: {
                show: true, //显示省份标签
                textStyle: {
                  color: '#0054cb',
                  fontWeight: 'bold',
                  fontSize: '12px',
                }, //省份标签字体颜色
              },
              emphasis: {
                //对应的鼠标悬浮效果
                show: true,
                textStyle: { color: '#fff' },
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 1, //区域边框宽度
                borderColor: '#fff', //区域边框颜色
                areaColor: 'rgb(140, 197, 255)', //区域颜色
              },

              emphasis: {
                borderWidth: 1, //鼠标滑过区域，区域边框宽度
                borderColor: '#fff', //鼠标滑过区域，区域边框颜色
                areaColor: '#0054cb', //鼠标滑过区域背景色
              },
            },
            data: [
              {
                name: '北京',
                url:
                  'https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg',
                value: '中国帝都',
              },
              {
                name: '上海',
                url:
                  'https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg',
                value: '',
              },
              {
                name: '天津',
                url:
                  'https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg',
                value: '',
              },
              {
                name: '重庆',
                url:
                  'https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg',
                value: '',
              },
              {
                name: '河北',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '山东',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '陕西',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '山西',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '辽宁',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '吉林',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '黑龙江',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '宁夏',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '江苏',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '河南',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '安徽',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '浙江',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '湖南',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '湖北',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '甘肃',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '青海',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '西藏',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '新疆',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '内蒙古',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '贵州',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '四川',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '江西',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '福建',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '广东',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '广西',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '云南',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '海南',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '香港',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '澳门',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
              {
                name: '台湾',
                url:
                  'https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg',
                value: '',
              },
            ],

            /*    data:[
		                	{
				        	      name: '西城',
				        	      value: 100
				        	    }, {
				        	      name: '东城',
				        	      value: 0
				        	    }, {
				        	      name: '海淀',
				        	      value: 60
				        	    }, {
				        	      name: '朝阳',
				        	      value: 0
				        	    }, {
				        	      name: '大兴',
				        	      value: 60
				        	    }, {
				        	      name: '通州',
				        	      value: 60
				        	    }, {
				        	      name: '丰台',
				        	      value: 0
				        	    }
		                ] */
          },
        ],
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.drop-menu {
  position: relative;
  z-index: 1000;
  width: 250px;
  height: 3rem;
  line-height: 3rem;
  margin-top: 1rem;
  font-size: 1.2rem;
  text-align: center;
  background: #1678ff;
  color: #fff;
  cursor: pointer;
  .arrow-icon {
    transition: 300ms ease all;
    transform: rotate(0);
  }
  .menu-list {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    width: 100%;
    height: 320px;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 18px;
    background: #000000;
    backdrop-filter: blur(4px);
    text-align: left;
    line-height: 2.5rem;
    transition: 300ms ease all;
    .menu-item {
      padding: 0 10px;
      .title {
        font-weight: bold;
      }

      .sub-menu {
        display: flex;
        align-items: center;
        font-size: 1rem;
      }
      a {
        color: #ababab;
      }
      a:hover {
        color: #1678ff;
      }
    }

    .menu-item:not(:last-child) {
      margin-bottom: 10px;
    }
  }
}
.active-menu {
  .menu-list {
    height: 0;
  }
}
.active-menu {
  .arrow-icon {
    transform: rotate(180deg);
  }
}
.bg-container {
  width: 100%;
  height: 500px;
  position: relative;
  .bg-img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 500px;

    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  .identity-list {
    height: 100%;
    display: flex;
    flex-flow: nowrap column;
    justify-content: center;
    align-items: flex-end;
    color: #fff;
    .item {
      z-index: 1000;
      width: 308px;
      height: 122px;
      padding: 10px;
      margin-bottom: 17px;
      border-radius: 5px;
      cursor: pointer;
      background: #ffffff6c;
      // backdrop-filter: blur(6px);
      transition: 300ms ease-in all;
      .title {
        height: 2.5rem;
        line-height: 2.5rem;
        min-width: 8rem;
        text-align: center;
        font-size: 1.2rem;
        color: #fff;
      }

      .el-divider--horizontal {
        margin: 20px 0;
      }

      .el-divider__text {
        position: absolute;
        background: #ffffff6c;
        color: #fff;
      }

      .sub-item {
        height: 2rem;
        line-height: 2rem;
        min-width: 33.3%;
        text-align: center;
        font-size: 12px;
        a {
          color: #fff;
        }
      }
    }
  }
}

.num-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  background: url('../../assets/icons/home/info-bg.png');
  padding: 10px 12%;
  .title {
    font-size: 30px;
    margin: 0;
  }
  .item {
    text-align: center;
    .num {
      font-size: 36px;
      color: #1678ff;
      line-height: 28px;
      padding: 10px 0;
    }
  }
  .num-container {
    text-align: center;
  }
}
@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
.dis-show {
  -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.sm-module-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.sm-module-1,
.sm-module-2,
.sm-module-3,
.sm-module-4,
.sm-module {
  min-height: 40vh;
  width: 1200px;
  padding-bottom: 20px;
  margin: auto;
  ::v-deep .el-tabs__nav {
    width: 100%;
  }

  .bg-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    .el-image {
      width: 100%;
      height: 100%;
    }
  }

  .module-title {
    padding: 40px 0;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #333333;
  }
  .bottom-tip {
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    @apply relative mt-16 z-20;
    // font-size: 12px;
  }
}

.sm-module-1 {
  .lt-float-bg {
    height: 1800px;
    @apply absolute left-0 top-0 w-full z-0;
    background: url('../../assets/icons/home/module-bg.png');
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
  }

  ::v-deep .el-tabs__content {
    @apply shadow-xl;
  }
  ::v-deep .el-tabs__item {
    width: 33.3%;
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
  }
  ::v-deep .el-tabs__item.is-active {
    font-size: 20px;
    font-family: Source Han Sans CN, Source Han Sans CN-Bold;
    font-weight: 700;
    color: #1678ff;
  }
  ::v-deep .el-tabs__active-bar {
    width: 80px !important;
    height: 4px;
    background: #1678ff;
    margin-left: 150px;
  }
  .module-container {
    display: grid;
    grid-row-gap: 4px;
    grid-column-gap: 0.2%;
    grid-template-columns: 33.23% 33.23% 33.23%;
    padding: 0 2px;
    margin: 25px auto 0;

    // background-color: #efefef;

    .item-container {
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      @apply rounded-sm;
    }
  }
}

.sm-module-2 {
  ::v-deep .el-tabs__content {
    @apply shadow-xl;
  }
  ::v-deep .el-tabs__item {
    width: 25%;
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
  }
  ::v-deep .el-tabs__item.is-active {
    font-size: 20px;
    font-family: Source Han Sans CN, Source Han Sans CN-Bold;
    font-weight: 700;
    color: #1678ff;
  }
  ::v-deep .el-tabs__active-bar {
    width: 80px !important;
    height: 4px;
    background: #1678ff;
    margin-left: 100px;
  }
  .module-container {
    display: flex;
    width: 100%;
    height: 527px;
    background-color: #fff;
    border-radius: 5px;
    margin-top: 25px;
    .left {
      position: relative;
      width: 289px;
      height: 100%;
      background-color: #1678ff;

      .module-card-img {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 226px;
        height: 169px;
      }
    }

    .right {
      width: calc(1200px - 289px);
      display: grid;
      grid-row-gap: 2px;
      grid-column-gap: 0.2%;
      grid-template-columns: 33.23% 33.23% 33.23%;
      background-color: #efefef;
      .item {
        position: relative;
        width: 100%;
        height: 263px;
        padding: 40px 16px 16px;
        background-color: #fff;
        cursor: pointer;
        transition: 300ms ease-in all;

        .title {
          font-size: 16px;
          font-family: Source Han Sans CN, Source Han Sans CN-Bold;
          font-weight: 700;
          color: #333;
        }
        .content {
          width: 271px;
          height: 98px;
          font-size: 14px;
          font-family: Source Han Sans CN, Source Han Sans CN-Regular;
          font-weight: 400;
          text-align: left;
          color: #333333;
          line-height: 28px;
        }
        .btn {
          position: absolute;
          bottom: -40%;
          left: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 188px;
          height: 40px;
          font-size: 14px;
          line-height: 40px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          margin: 0 63px 0 52px;
          transition: 300ms ease-in all;
          background: #1678ff;
          color: #fff;
          border-radius: 4px;
          .el-image {
            width: 20px;
            height: 20px;
            margin-right: 4px;
          }
        }
      }
      .item:hover {
        .btn {
          bottom: 10%;
        }
      }
    }
  }
}

.sm-module-3 {
  ::v-deep .el-tabs__content {
    @apply shadow-xl;
  }
  color: #fff;
  ::v-deep .el-tabs__active-bar {
    height: 3px;
    background-color: #fff;
  }
  ::v-deep .el-tabs__item.is-active {
    font-size: 20px;
    font-family: Source Han Sans CN, Source Han Sans CN-Bold;
    font-weight: 700;
    color: #fff;
  }
  ::v-deep .el-tabs__active-bar {
    width: 80px !important;
    height: 4px;
    background: #fff;
    margin-left: 100px;
  }

  .module-title {
    color: #fff;
  }
  ::v-deep .el-tabs__item {
    width: 25%;
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
    color: #fff;
  }
  ::v-deep .is-active {
    font-weight: bold;
  }
  .bg-img {
    background-color: #1678ff;
  }
  .module-container {
    display: flex;
    height: 100%;
    align-items: stretch;
    .left {
      .map {
        width: 755px;
        height: 639px;
      }
    }
    .right {
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-around;
      height: 639px;
      padding: 30px 0;

      .item {
        padding: 20px;
        border-radius: 5px;
        background-color: #409eff;
        border: 0.5px solid #efefef;
        backdrop-filter: blur(6px);
        .title {
          font-size: 20px;
          height: 2rem;
          line-height: 2rem;
          font-weight: bold;
          color: #fff;
        }
        .list {
          display: flex;
          flex-flow: row wrap;
          width: 100%;
          text-align: center;
          .el-col {
            padding: 10px;

            .num-container {
              padding-top: 0.5rem;
              .num {
                font-size: 25px;
                font-weight: bold;
              }
              .unit {
                font-size: 14px;
                margin-left: -4px;
                color: #eee;
              }
            }
            .name {
              font-size: 18px;
              padding-top: 0.2rem;
              color: #eee;
            }
          }
        }
      }
    }
  }
}
.sm-module-4 {
  width: 1200px;
}
.sm-module-container-4 {
  background-color: #efefef;
}
.line-container {
  width: 1126px;
  // width: 1200px;
  // transform: translateX(74px);
  // margin-right: -74px;
  margin-left: 78px;

  .hexagon-container:nth-child(even) {
    left: -81px;
  }

  .hexagon-container {
    position: relative;

    // display: flex;
    // flex-flow: row wrap;
    // justify-content: space-around;
    // align-items: center;

    height: 170px;
    @apply grid grid-cols-7 items-center;
    grid-column-gap: 15px;
    @for $i from 2 through 5 {
      &:nth-child(#{$i}) {
        top: calc(#{$i - 1} * (-30px));
      }
    }

    .hexagon,
    .hexagon-title {
      // width: 170px;
      // height: 85px;
      height: 74px;
      width: 148px;

      background-color: #fff;
      position: relative;
      filter: drop-shadow(0px 6px 4px rgba(97, 97, 97, 0.6));
      cursor: pointer;
      transition: 300ms ease all;

      .img-container {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        z-index: 10;
        // width: 130px;
        // height: 130px;
        width: 120px;
        height: 120px;
        padding: 12px;
        border-radius: 50%;
        overflow: hidden;
        .el-image {
          width: 100%;
          height: 100%;
        }
      }

      .content {
        position: absolute;
        top: -20px;
        left: 20%;
        z-index: 10;
        font-size: 30px;
        width: 60%;
        text-align: center;
        margin: auto;
        color: #fff;
        border-radius: 50%;
        background-color: #1678ff;
      }
      // box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.16);
    }

    .hexagon:hover,
    .hexagon-title:hover {
      transform: translateY(-20px);
      &::after {
        filter: drop-shadow(0px 12px 4px rgba(97, 97, 97, 0.6));
      }
      // &::before {
      //   filter: drop-shadow(0px -4px 4px rgba(97, 97, 97, 0.6));
      // }
    }

    .hexagon:before,
    .hexagon-title::before {
      content: '';
      position: absolute;
      top: -37px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 74px solid transparent;
      border-right: 74px solid transparent;
      border-bottom: 37px solid #fff;
      transition: 300ms ease-out all;

      // filter: drop-shadow(0 -8px 17px rgba(151, 150, 150, 0.6));
    }
    .hexagon:after,
    .hexagon-title:after {
      content: '';
      position: absolute;
      bottom: -37px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 74px solid transparent;
      border-right: 74px solid transparent;
      border-top: 37px solid #fff;
      transition: 300ms ease-out all;

      // filter: drop-shadow(0px 10px 5px rgba(97, 97, 97, 0.6));
    }

    .hexagon-title {
      background: #1678ff;
    }
    .hexagon-title:before {
      border-bottom: 37px solid #1678ff;
    }
    .hexagon-title:after {
      border-top: 37px solid #1678ff;
    }
  }
}
</style>
